import { inject, observer } from 'mobx-react';
import EHeader from '../../common/EHeader';
import ComEchart from '../../common/ComEchart';
import { Spin } from 'antd';
import {  WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@inject('wfCenterStore')

@observer
class Main extends React.Component{

    onChartClick = (v) => {
      let url = '/spa/workflow/index_mobx.jsp#/main/workflow/supervise?';
      if(v.componentType == 'series' && v.data) {
        switch(v.data.flag) {
          case('hasSupervised'): {
            url += 'jumpTab=2'
          };break;
          case('noSupervision'): {
            url += 'jumpTab=1'
          }; break;
        }
      } else {
        url += 'jumpTab=0'
      }
      window.open(url, '_blank')
    }
    componentDidMount() {
      const { getSuperviseStatisticInfo } = this.props.wfCenterStore;
      getSuperviseStatisticInfo();
    }
    componentWillReceiveProps(nextProps) {
      const { getSuperviseStatisticInfo } = this.props.wfCenterStore;
      if(this.props.location.key !== nextProps.location.key) {
        getSuperviseStatisticInfo();
      } 
    }
    shouldComponentUpdate(nextProps,nextState) {
        return true;
    }
    render() {
      const { superviseData, loadingStatusObj:{ superviseHasLoad }} = this.props.wfCenterStore;
      const {
        hasSupervised, 
        noSupervision, 
        totleCount = 0 
      } = superviseData;

      let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {d}%',
        },
        graphic: {
          type: 'text', 
          top: 'center',              
          left: 'center',            
          style: {
              text: totleCount,       
              fill: '#484a4d',  
              fontSize: 24, 
              lineHeight: 24,          
              fontWeight: 'bold'		
          }
        },
        series: [
            {
                name: getLabel('500437','督办统计'),
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                selectedMode: 'single', 
                selectedOffset: 10,
                animation: false,
                label: {
                  formatter: '{b}: {d}%',
                  color: '#333'
                },
                labelLine: {
                  show: 'true',
                  length: 15,
                  length2: 0,
                },
                data: [{
                  value: hasSupervised, 
                  flag: 'hasSupervised',
                  name: getLabel('33227','已督办'),
                },
                {
                  value: noSupervision, 
                  flag: 'noSupervision',
                  name: getLabel('33226','未督办')
                }],
                color: ['#66c8c9', '#589ff8']
            }
        ]
      };
      return(
        <div className='wf-center-ele-item supervise-div'>
          <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@eru5cc`} title={getLabel('500437','督办统计')}/>
           <div className='attentionwf-ele-content'>
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ukuhz5`} spinning={!superviseHasLoad}></Spin>
              {
                superviseHasLoad && totleCount !== 0 &&  <ComEchart ecId={`${this && this.props && this.props.ecId || ''}_ComEchart@ls2ybi`} 
                  origin={'superviseChart'}
                  style={{width: '600px', height: '300px'}}
                  option={option}
                  onChartClick={this.onChartClick}/>
              }
              {
                 superviseHasLoad && totleCount == 0 && 
                  <div className='img-wrap'>
                    <img src='/images/ecology9/workflow/center/nodata.png'/>  
                  </div>
              }
            </div>
        </div>
      ) 
      
    }
}

export default Main